import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import styles from "./login.module.less";
import { $adminLogin } from "@/api/admin/admin";
import { useStore as useUserStore } from "@/store/user";
import useNavigator from "@/hooks/useNavigator";
import _ from "lodash";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const userStore = useUserStore();
    const redirectPath: any =  '/';
    const form = reactive({
      username: '',
      password: '',
      logining: false,
    } as any)
    const submit = _.debounce(() => {
      if (form.logining) {
        return;
      }
      if (!form.username) {
        message.error('请输入账号!');
        return;
      }
      if (!form.password) {
        message.error('请输入密码!');
        return;
      }
      form.logining = true;
      const logining = message.loading('登录中...', 0);
      $adminLogin({
        username: form.username,
        password: form.password,
      }).then((res: any) => {
        message.success('登录成功!');
        userStore.login({
          token: res.data?.token || '',
          uid: res.data?.uid || '',
          userinfo: {
            username: res.data?.username || '',
          },
          isSuperAdmin: res.data?.is_super || false,
          channel_id:res.data?.channel_id || 0,
          city_id:res.data?.city_id || '',
          area_id:res.data?.area_id || '',
          type:res.data?.type || '',
          street_id:res.data?.street_id ||'',
        })
        if(userStore.userinfo.is_reset_password)
        {
           navigator.push('/changePassword');
        }else
        {
           navigator.push(redirectPath);
        }
      }).finally(() => {
        form.logining = false;
        logining();
      })
    }, 300, { leading: true, trailing: false })
    const keyUpLogin = (e: any) => {
      if (e.keyCode === 13) {
        submit();
      }
    }
    onMounted(() => {
      window.addEventListener('keyup', keyUpLogin);
    })
    onUnmounted(() => {
      window.removeEventListener('keyup', keyUpLogin);
    })
    return () => (
      <div class={styles.login}>
        <div class={styles['login-bg']}></div>
        <div class={styles.card}>
          <div class={styles['card-header']}>女性健康公益保险</div>
          <div class={styles['card-row']}>
            <a-input size="large" v-model={[form.username, 'value']} placeholder="工号" v-slots={{
              prefix: () => (
                <UserOutlined />
              )
            }} />
          </div>
          <div class={styles['card-row']}>
            <a-input size="large" type="password" v-model={[form.password, 'value']} placeholder="密码" v-slots={{
              prefix: () => (
                <LockOutlined />
              )
            }} />
          </div>
          <div class={styles['btns']}>
            <a-button size="large" class={styles['btn']} type="primary" onClick={() => { submit() }}>登录</a-button>
          </div>
        </div>
      </div>
    )
  }
})